<template>
  <div>
    <div id="list">
      <div v-for="(item, index) in products" :item="item" :key="index" id="contact">
        <router-link :to="{
          name: 'CommodityDetail',
          params: {//使用 params 传递参数时,query 不能使用，需要使用 params
            id: item.id,
            img: item.img,
            name: item.name,
            price: item.price,
            tmPrice: item.tmPrice,
            discount: item.discount,
            originalPrice: item.originalPrice,
            num: 1,
          }
        }">
          <img :src="item.img" :title="item.name" />
          <h2>
            <span class="price">
              {{ item.price }} &nbsp;
              <span class="originalPrice">{{ item.originalPrice }}</span>&nbsp;
              <span class="discount">{{ item.discount }}</span>
            </span>
            <br />
            {{ item.name }}
          </h2>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommodityList",
  data() {
    return {
      products: [
        {
          id: "1",
          name: "太平鸟 | 【蜡笔小新】男装夏季男士宽松情侣短袖男式T恤",
          img:
            "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/111495/2021/0625/85/15e5fe0a-2840-4b28-b77d-0292a567ae6e_420_531_380x480_90.jpg",
          price: "￥104",  //现价
          discount: "2.6折",
          originalPrice: "￥268", //原价
          tmPrice: "￥99", //特卖价
        },
        {
          id: "2",
          name: "太平鸟 | 三维熊t恤女夏装中长款宽松大码体恤上衣短袖",
          img:
            "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00115128/10001155/903534495-1093044331794329600-1093044331794329602-50_420_531_512x648_90.jpg",
          price: "￥211",
          discount: "4.5折",
          originalPrice: "￥268",
          tmPrice: "￥163",
        },
        {
          id: "3",
          name: "太平鸟 | 碎花复古翻领V领连衣裙女夏季收腰长裙甜美茶",
          img:
            "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00115128/10001155/1781631002-1089385152500224013-1089385152500224018-50_420_531_512x648_90.jpg",
          price: "￥255",
          discount: "3.4折",
          originalPrice: "￥599",
          tmPrice: "￥199",
        },
        {
          id: "4",
          name:
            "太平鸟 | 男装2022夏季新品男士T恤时尚情侣刺绣休闲短袖体恤男式T恤",
          img:
            "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/111495/2022/0117/78/a1416563-af91-40fc-8834-b59a9aaee14b_420_531_512x648_90.jpg",
          price: "￥89",
          discount: "4.3折",
          originalPrice: "￥198",
          tmPrice: "￥78",
        }
      ],
      num: 1,
    };
  },
  methods: {

  },
  mounted: function () {
    this.public.$on('reduceNum', function (id, num) {
      console.log('购买成功，库存-1');
      console.log(id, num);
    });
    //this.public.$off([]); //销毁时，移除所有绑定事件
  },
  beforeCreate: function () {
    console.log('销毁了');
  }
};
</script>

<style scoped>
#list a {
  text-decoration: none;
}

#list img {
  width: 450px;
  margin: 20px 25px;
}

#list h2 {
  width: 460px;
  color: #333;
  margin-left: 30px;
  font-weight: 500;
  font-size: 25px;
}

#contact {
  float: left;
}

.price {
  color: #333;
  font-size: 40px;
}

.originalPrice {
  color: gray;
  font-size: 30px;
  text-decoration: line-through;
}

.discount {
  color: gray;
  font-size: 30px;
}
</style>